<template>
  <div style="width: 100%; height: 100%; display: flex; min-height: 600px">
    <div style="background-color: #fff; box-shadow: 5px #fff; height: calc(100% - 20px); width: calc(100% - 5px)">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="正常响应" name="first">
          <!-- <el-radio-group v-model="formatRadio">
            <el-radio :value="3">普通文本</el-radio>
            <el-radio :value="6">XML字符串</el-radio>
            <el-radio :value="9">JSON字符串</el-radio>
          </el-radio-group> -->
        </el-tab-pane>
        <el-tab-pane label="异常响应" name="second">
          <!-- <el-radio-group v-model="formatRadio">
            <el-radio :value="3">普通文本</el-radio>
            <el-radio :value="6">XML字符串</el-radio>
            <el-radio :value="9">JSON字符串</el-radio>
          </el-radio-group> -->
        </el-tab-pane>
        <el-tab-pane label="数据转换" name="third"> </el-tab-pane>
        <el-tab-pane label="出参字段说明" name="fourth"> </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';

defineOptions({
  name: 'SoapOutputParam',
});

const activeName = ref('first');

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>
<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs :deep(.el-tabs__nav) {
  padding: 0 20px;
}
</style>
